<script setup>
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
import { loginApi } from '../../util/requrst';
const store = useStore()
const router = useRouter()
const count = store.state.number.count
const loginData = reactive({
  username: "",
  password: "",
  // vuex数据
  // num: count,
  // numStatus: store.getters.countStatus
})
// 跳转到user页面
const handleLogin = () => {
  // 请求后台接口
  // 默认用户admin 123456
  loginApi(loginData).then(res => {
    console.log("登录返回值", res);
    if (res.data) {
      store.commit('setUserInfo', res.data)
      localStorage.setItem("loginData", JSON.stringify(res.data))
      router.push({
        path: "/index"
      })
    }
  })

}
// vuex语法
// console.log("修改前getters", store.getters["number/countStatus"]);
// const handleLogin = () => {
//   // store.commit("number/setCountPromise", 100)
//   store.dispatch('number/setCountPromise', 100).then(res => {
//     alert("修改成功")
//   }).catch(err => {
//     alert(err)
//   })
//   console.log(store.state.number.count);
//   console.log("修改之后getters", store.getters["number/countStatus"]);
// }



</script>

<template>
  <div class="login_wrap">
    <img src=" ../../img/shop.jpg" alt="">
    <div class="form_wrap">
      <h1 style="color: skyblue">用户登录</h1>
      <!-- ref来自何处 -->
      <el-form ref="formRef" style="max-width: 600px" :model="loginData" label-width="auto" label-position="left"
        class="demo-dynamic">
        <el-form-item prop="username" label="用户名" :rules="[
          {

            required: true,
            message: '此项目为必填项目',
            trigger: 'blur',
          },

        ]">
          <el-input v-model="loginData.username" />
        </el-form-item>

        <el-form-item prop="password" label="密码" :rules="[
          {

            required: true,
            message: '此项目为必填项目',
            trigger: 'blur',
          },

        ]">
          <el-input type="password" v-model="loginData.password" />
        </el-form-item>
      </el-form>
      <el-button type="primary" class="login_button" @click="handleLogin">登录</el-button>
      <!-- <p>{{ loginData.num }}</p> -->
    </div>
  </div>
</template>

<style scoped>
.login_wrap {
  width: 100%;
  height: 96vh;
}

img {
  float: left;
  width: 60%;
  height: 100%;
}

.form_wrap {
  padding-top: 10%;
  float: right;
  width: 40%;
  text-align: center;
  background-color: white;
  border-radius: 5px;
  box-sizing: border-box;
  height: 100%;


}

.login_button {
  width: 80%;
}
</style>